<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for("static", filename="css/styles.css") }}">
    <link rel="stylesheet" href="{{ url_for("static", filename="bootstrap/bootstrap.4.6.min.css") }}">
    <title>注册</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand" href="/chat">智能客服</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item ml-2">
                </li>
            </ul>
            <ul class="navbar-nav">
                {% if user %}
                    <li class="nav-item">
                        <span class="nav-link">{{ user.username }}</span>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for("main.logout") }}">退出登录</a>
                    </li>
                {% elif not user %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for("main.login") }}">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for("main.register") }}">注册</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
<div class="register-form">
    <h2>智能客服</h2>
    <form action="" method="POST" id="register-form">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
            <div id="username-error" style="color:red;"></div>
        </div>

        <div class="form-group">
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required>
            <div id="email-error" style="color:red;"></div>
        </div>

        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
            <div id="password-error" style="color:red;"></div>
        </div>
        <div class="form-group">
            <label for="password_confirm">确认密码</label>
            <input type="password" id="password_confirm" name="password_confirm" required>
            <div id="password-confirm-error" style="color:red;"></div>
        </div>
        <div class="form-group">
            <button type="submit">注册</button>
        </div>
    </form>
</div>

<script>
document.getElementById('register-form').addEventListener('submit', function (event) {
    event.preventDefault();
    const errors = [];
    let usernameInput = document.getElementById('username');
    let emailInput = document.getElementById('email');
    let passwordInput = document.getElementById('password');
    let confirmPasswordInput = document.getElementById('password_confirm');

    // 验证用户名
    const username = usernameInput.value;
    if (username.length < 3 || username.length > 10) {
        errors.push("用户名长度不符合要求");
        document.getElementById('username-error').textContent = "用户名长度不符合要求";
    } else {
        document.getElementById('username-error').textContent = "";
    }

    // 验证密码
    const password = passwordInput.value;
    if (password.length < 8 || password.length > 20) {
        errors.push("密码过长不符合要求");
        document.getElementById('password-error').textContent = "密码过长不符合要求";
    } else {
        document.getElementById('password-error').textContent = "";
    }

    // 验证密码确认
    const confirmPassword = confirmPasswordInput.value;
    if (password !== confirmPassword) {
        errors.push("两次输入的密码不一致");
        document.getElementById('password-confirm-error').textContent = "两次输入的密码不一致";
    } else {
        document.getElementById('password-confirm-error').textContent = "";
    }

    // 使用Ajax检查邮箱是否重复
    validateEmail(emailInput);
    function validateEmail(input) {
        const email = input.value;
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            errors.push("邮箱格式错误");
            document.getElementById('email-error').textContent = "邮箱格式错误";
        } else {
            document.getElementById('email-error').textContent = "";
        }

        fetch('/check-email', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `email=${encodeURIComponent(email)}`
        })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    errors.push(data.error);
                    document.getElementById('email-error').textContent = data.error;
                } else {
                    document.getElementById('email-error').textContent = "";
                }
            })
            .catch(error => console.error('Error:', error));
    }

    if (errors.length === 0) {
        // 如果没有错误，提交表单
        this.submit();
    } else {
        // 显示错误信息
        console.error(errors);
    }

    // 禁止密码字段的粘贴操作
    document.addEventListener('DOMContentLoaded', function () {
        var passwordFields = document.querySelectorAll('input[type="password"]');
        passwordFields.forEach(function (field) {
            field.addEventListener('paste', function (e) {
                e.preventDefault(); // 阻止粘贴操作
            });
        });
    });
});
</script>
</body>
</html>